<template>
	<el-form-item prop="name" :rules="nameRequiredRule">
		<template #label>
      <span>{{ $t('designer.setting.uniqueName') }}
        <el-tooltip effect="light" :content="$t('designer.setting.editNameHelp')">
          <el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
				<el-icon-info-filled style="height: 1.1em;width: 1.1em"/>
			</el-icon>
		</el-tooltip>
      </span>
		</template>
		<template v-if="!!thisSelectedWidget.category || noFieldList">
			<el-input type="text" v-model="thisOptionModel.name" :readonly="widgetNameReadonly" @change="updateWidgetNameAndRef"></el-input>
		</template>
		<template v-else>
			<el-select v-model="thisOptionModel.name" allow-create filterable :disabled="widgetNameReadonly" @change="updateWidgetNameAndRef"
					   :title="$t('designer.setting.editNameHelp')">
				<el-option v-for="(sf, sfIdx) in serverFieldList" :key="sfIdx" :label="sf.label" :value="sf.name"></el-option>
			</el-select>
		</template>
	</el-form-item>
</template>

<script>
import {isEmptyStr} from "@/utils/util"

export default {
	name: "name-editor",
	mixins: [],
	props: {
		designer: Object,
		selectedWidget: Object,
		optionModel: Object,
	},
	inject: ['serverFieldList', 'getDesignerConfig'],
	data() {
		return {
			thisOptionModel:this.optionModel,
			thisSelectedWidget: this.selectedWidget,
			nameRequiredRule: [{required: true, message: 'name required'}],
		}
	},
	watch: {
		'selectedWidget': {
			handler(val) {
				if (val) {
					this.thisSelectedWidget = val
				}
			}
		},
		'optionModel': {
			handler(val) {
				if (val) {
					this.thisOptionModel = val
				}
			}
		}
	},
	computed: {
		noFieldList() {
			return !this.serverFieldList || (this.serverFieldList.length <= 0)
		},
		widgetNameReadonly() {
			return !!this.getDesignerConfig().widgetNameReadonly
		},
	},
	methods: {
		updateWidgetNameAndRef(newName) {
			let oldName = this.designer.selectedWidgetName
			if (isEmptyStr(newName)) {
				this.thisSelectedWidget.options.name = oldName
				this.$message.info(this.$t('designer.hint.nameRequired'))
				return
			}

			if (this.designer.formWidget) {
				let foundRef = this.designer.formWidget.getWidgetRef(newName) // 检查newName是否已存在！！
				if (foundRef) {
					this.thisSelectedWidget.options.name = oldName
					this.$message.info(this.$t('designer.hint.duplicateName') + newName)
					return
				}

				let widgetInDesign = this.designer.formWidget.getWidgetRef(oldName)
				if (!!widgetInDesign && !!widgetInDesign.registerToRefList) {
					widgetInDesign.registerToRefList(oldName)  //注册组件新的ref名称并删除老的ref！！
					let newLabel = this.getLabelByFieldName(newName)
					this.designer.updateSelectedWidgetNameAndLabel(this.selectedWidget, newName, newLabel)
				}
			}
		},

		getLabelByFieldName(fieldName) {
			console.log(fieldName);
			for (let i = 0; i < this.serverFieldList.length; i++) {
				if (this.serverFieldList[i].name === fieldName) {
					return this.serverFieldList[i].label
				}
			}
			return null
		},
	}
}
</script>

<style lang="scss" scoped>

</style>
